<template>
  <div class="form-container">
    <el-form ref="form" label-width="108px">
    <div class="print-process">
  <h3>标签打印流程</h3>
  <ol>
    <li>打印机选配
      <ul>
        <li>普通标签打印:标签纸选用通用标签打印机,A4标签纸选用通用激光和喷墨打印机,二选一即可。</li>
        <li>RFID标签打印,RFID标签属于特殊标签,RFID标签和打印机选配请联系客服。</li>
      </ul>
    </li>
    <li>普通标签纸类型选配
      <ul>
        <li>热敏标签打印机配套热敏标签纸，热转印打印机配套热转印标签纸，两种不可混用。</li>
      </ul>
    </li>
    <li>安装打印机驱动并配置好标签规格，有疑问咨询打印机对应的品牌商即可。</li>
    <li>自定义配置并选择标签模板。</li>
    <li>点击左上角“打印标签”按钮，去资产清单页打印标签即可。</li>
  </ol>
</div>
    <el-form-item label="标签类型" prop="modelType">
      <el-radio-group v-model="form.labelType" class="ml-4">
        <el-radio label="1" size="large">条形码</el-radio>
        <el-radio label="2" size="large">二维码</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="纸张类型" prop="paperType">
      <el-radio-group v-model="form.paperType" class="ml-4">
        <el-radio label="1" size="large">标签专用纸</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-from-item>
      <el-form-item label="打印布局" prop="layout">
        <el-radio-group v-model="form.layout" class="ml-4">
          <el-radio label="horizontal" size="large">横向</el-radio>
          <el-radio label="vertical" size="large">纵向</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-from-item>
  </el-form>
    <div class="template-list" :class="form.layout">
      <div style="margin-right: 20px;position: relative;padding: 20px;" v-for="(template) in templates" @click="select(template)">
        <i v-if="template.selected" style="position: absolute;left:0;top:0;width:25px;height:25px;cursor: pointer;background: #005bf5;border-radius: 50%;color:white;padding: 4px;">
          <Check></Check>
        </i>
        <i title="删除" style="position: absolute;right:0;top:0;width:30px;height:30px;cursor: pointer;background: rgba(0, 0, 0, 0.3);color:white;" @click.stop="del(template)">
          <Close></Close>
        </i>
        <tag-display-list-item :label-type="template.labelType" :fields="template.fields" :code-position="template.codePosition"></tag-display-list-item>
      </div>
      <div class="add-template-box" @click="showAddDialog">
        <i class="icon el-icon-plus"></i>
        <button>添加模板</button>
    </div>
    </div>
    <AddDialog ref="addDialog" @sub="getList" />
  </div>
</template>

<script>

import api from './api.js'
import AddDialog from './AddDialog.vue';
import TagDisplayListItem from "@/views/asset/settings/tag/TagDisplayListItem.vue";
import { Check, Remove } from "@element-plus/icons-vue";


export default {
  components: {
    Check,
    Remove,
    TagDisplayListItem,
    AddDialog
  },
  data() {
    return {
      form: {
        labelType: '1',
        paperType: '1',
      },
      labelType: '',
      templates: [],
      showQcode: false,
      showBarline: false // 控制Barline组件显示的变量
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      api.list(this.form.labelType).then(response => {

        this.templates = response;
      })
    },
    del(row) {
      api.del(row.id).then(response => {
        this.getList();
      })
    },
    showAddDialog() {
      this.$refs.addDialog.open(this.form);
    },
    select(row) {
      api.select(row).then(()=> {
        this.getList();
      })
    }
  },
  watch: {
    'form.labelType': function () {
      this.getList();
    }
  }
}
</script>
<style scoped>
.form-container {
  margin: 10px;
}
.print-process {
  margin-top: 20px;
  background-color: #e5eefe;
}
.template-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.template-box {
  width: 200px;
  height: 150px;
  border: 1px solid #000;
  padding: 10px;
  background-color: #f9f9f9;
  margin-right: 20px;
}

.template-content {
  padding: 10px;
}

.template-row {
  display: flex;
  padding: 5px 0;
}

.template-name {
  width: 90px;
  border-right: 1px solid #000;
  padding-right: 10px;
}

.template-value {
  padding-left: 10px;
}

.bar-code-box > img {
  width: 150px;
  display: flex;
  justify-content: center;
  padding: 10px;
  border-bottom: 1px solid #000;
}

.add-template-box {
  display: flex;
  align-items: center;
  float: right;
  background-color: #f5f5f5;
  border: 1px solid #dcdcdc;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.template-delete {
  float: right;
  padding: 0;
}

.horizontal{
  flex-direction:row;
}
.vertical{
  flex-direction:column;
}
.icon {
  font-size: 20px;
  margin-right: 5px;
}
button {
  width: 200px;
  background: none;
  border: none;

  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  outline: none;
}

.print-process {
  margin-top: 20px;
  padding: 20px;
  background-color: #f9faff;
  border: 1px solid #d1e3f5;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  color: #333;
}

.print-process h3 {
  font-size: 1.5em;
  color: #0053a6;
  font-weight: 600;
  margin-bottom: 15px;
  border-bottom: 2px solid #d1e3f5;
  padding-bottom: 5px;
}

.print-process ol {
  padding-left: 20px;
  margin-top: 10px;
  font-size: 1em;
  line-height: 1.6;
}

.print-process ol li {
  margin-bottom: 15px;
  color: #333;
}

.print-process ul {
  list-style-type: disc;
  padding-left: 20px;
  margin-top: 8px;
  color: #555;
}

.print-process li::marker {
  color: #0053a6;
}

.print-process ul li {
  margin-bottom: 8px;
  color: #555;
}
</style>
